<template src="./template.html"></template>

<script>
/* global moment */
import { getExerciseReport } from '../models'
import CReport from '../c-report'
import { filterCosUrl } from 'filters/form'

export default {
  components: { CReport },
  data() {
    return {
      isPageLoading: false,
      lessonInfos: null,
      reportCardList: [],
      videoInfo: {}

    }
  },
  computed: {
    exerciseId() {
      return this.$route.params.exerciseId
    },
    exerciseList() {
      return [{
        exerciseNumber: this.lessonInfos.exerciseNumber
      }]
    }
  },
  methods: {
    async $getExerciseReport() {
      this.isPageLoading = true;
      const params = {
        exerciseId: this.exerciseId
      };
      try {
        const { data } = await getExerciseReport(params);
        this.lessonInfos = {
          ...data,
          useTime: data.useTime && this.formattedTime(parseInt(data.useTime, 10))
        }
        this.$initReportCardList()
        this.isPageLoading = false;
      } catch (err) {
        this.isPageLoading = false;
        console.log(err)
        this.$message.error(err.message || '获取信息出错')
      }
    },
    formattedTime(totalSeconds) {
      const duration = moment.duration(totalSeconds, 'seconds');

      const minutes = duration.minutes();
      const seconds = duration.seconds();

      // 格式化为"*分*秒"
      return `${minutes}分${seconds}秒`;
    },
    $initReportCardList() {
      const reportCardList = [
        {
          title: '完整度',
          tag: '优秀',
          tagClass: '',
          progress: this.lessonInfos.completeness || 50,
          progressColor: '#2AB55E',
          content: this.lessonInfos.completenessMessage || ''
        },
        {
          title: '准确度',
          tag: '优秀',
          tagClass: '',
          progress: this.lessonInfos.fillWordsStuttering || 60,
          progressColor: '#2AB55E',
          content: this.lessonInfos.accuracyMessage || ''
        },
        {
          title: '流畅度',
          tag: '优秀',
          tagClass: '',
          progress: this.lessonInfos.fluency || 70,
          progressColor: '#2AB55E',
          content: this.lessonInfos.fluencyMessage || ''
        },
        {
          title: '自信度',
          tag: '优秀',
          tagClass: '',
          progress: this.lessonInfos.confidence || 80,
          progressColor: '#2AB55E',
          content: this.lessonInfos.confidenceMessage || ''
        },
        {
          title: '语速音量',
          tag: '优秀',
          tagClass: '',
          progress: this.lessonInfos.speedVolume || 90,
          progressColor: '#2AB55E',
          content: this.lessonInfos.speedVolumeMessage || ''
        }
      ]

      if (this.lessonInfos?.exerciseFiles) {
        this.lessonInfos.exerciseFiles.forEach(it => {
          if (it.isPicture === 1) {
            this.videoInfo.screenshotUrl = filterCosUrl(it.filePath)
          }
          if (it.fileName.includes('.mp4')) {
            this.videoInfo.url = filterCosUrl(it.filePath)
          }
          console.log(this.videoInfo)
        })
      }
      // this.reportCardList = reportCardList
      this.$set(this, 'reportCardList', reportCardList)
    }
  },
  mounted() {
    this.$getExerciseReport()
  },

}
</script>
